<template>
  <div class="my-music">
    <div class="myMusicT">
      <div class="subnav">
      </div>

      <div class="g-bd">
        <div class="n-pglg">
          <div class="pic">
            <h2>登录网易云音乐</h2>
            <a
              hidefocus="true"
              href="#"
              onclick="top.login();return false;"
              class="btn"
            >立即登录</a>
          </div>
        </div>
        <a
          class="HuaGuo"
          @click="Dlu"
        >

        </a>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  data: () => ({}),
  created() {},
  methods: {
    Dlu(){
      console.log("aaa")
      let phoneLogin=document.querySelector(".phoneLogin")
      let dengLu=document.querySelector(".dengLu")
      let dengluTao=document.querySelector(".dengluTao")
      let ZDL=document.querySelector(".ZDL")
      dengLu.style.display="block"
      // dengluTao.style.display="block"
      // phoneLogin.style.display="none"
      ZDL.style.display="none"
    },
  },
};
</script>
<style lang="less">
.my-music{
  .myMusicT{
    .subnav{
      position: relative;
      height: 5px;
      border-bottom: none;
      z-index: 90;
      height: 5px;
      box-sizing: border-box;
      background-color: #C20C0C;
      position: relative;
      zoom: 1;

    }
    .g-bd{
      position: relative;
      width: 980px;
      min-height: 700px;
      margin: 0 auto;
      background-color: #fff;
      border: 1px solid #d3d3d3;
      border-width: 0 1px;
        .n-pglg{
          width: 807px;
          height: 268px;
          margin: 0 auto 0;
          padding-top: 104px;
          background: url('../../assets/cyzimgs/DLwangyiyun.png') no-repeat 0 9999px;
          background-position: 0 104px;
          .pic{
            font-size: 12px;
            color: #333;
            font-family: Arial, Helvetica, sans-serif;
            h2{
              height: 100px;
              text-indent: -9999px;
              font-size: 100%;
              padding: 0;
              margin: 0;
            }
            a{
              display: block;
              width: 167px;
              height: 45px;
              margin: 102px 0 0 482px;
              background: url('../../assets/cyzimgs/DLwangyiyun.png') no-repeat 0 9999px;
              background-position: 0 9999px;
              text-indent: -9999px;
              outline: none;
              cursor: pointer;
            }
          }
        }
        .HuaGuo{
          display: block;
          cursor: pointer;
          width: 168px;
          height: 45px;
          background: red;
          position: absolute;
          top: 306px;
          left: 568px;
          opacity: 0.5;
          border-radius: 7px;
          background: url('../../assets/cyzimgs/DLwangyiyun.png') no-repeat 0 9999px;
          background-position: 0px 200px;
        }
        .HuaGuo:hover{
          background-position: 0px -278px;
        }
    }
  }
}
</style>
